import {Message, MessageDirection, MessageRole} from "@/types/chat";
import {Space, Avatar} from "antd";
import styles from "./dialog-message-item.module.scss"
import {RefObject, useState} from "react";
import {Markdown} from "@/app/markdown/markdown";
import {ChatAction} from "./dialog-message-action"
import {CopyOutlined, PauseCircleTwoTone, SyncOutlined} from "@ant-design/icons";
import {userChatStore} from "@/app/store/chat-store";
import {copyToClipboard} from "@/utils";
import dayjs from "dayjs";

interface Props {
    message: Message,
    parentRef?: RefObject<HTMLDivElement>;
}

export function DialogMessageItem(props: Props) {
    const {message, parentRef} = props;
    const isUser = message.role === MessageRole.user;
    const isSystem = message.role === MessageRole.system;
    const date = message?.time ? dayjs(message.time).format('YYYY/MM/DD HH:mm:ss') : ''
    // 说明这是个接接收的消息
    const isReceive = message.direction == MessageDirection.Receive
    // 在 React 中，每个组件的 return 语句只能返回一个根元素。使用空片段允许你在不引入不必要的额外 div 或其他容器元素的情况下，返回多个子元素。这样可以避免因为添加额外的 DOM 元素而对样式和布局产生意外的影响。
    const  chatStoreAll = userChatStore()
    const isProcessing =  chatStoreAll.currentSession().isDisabled
    function retryHandle(){
        chatStoreAll.onRetry()
    }
    const copyHandle = async () => {
        copyToClipboard(message.content)
    }

    function stopHandler(){
        chatStoreAll.onSessionStop()
    }
    return <>
        <div
            className={
                isUser ? styles["chat-message-user"] : styles["chat-message"]
            }
        >
            <div className={styles["chat-message-container"]}>
                <div className={styles["chat-message-header"]}>
                    <div className={styles["chat-message-avatar"]}>
                        <Avatar shape="square" src={message.avatar} size={30} style={{
                            borderRadius: '4px',
                            backgroundColor: '#f6f6f6'
                        }}/>

                    </div>
                    <div className={styles['chat-message-edit']}>
                        <Space>
                            <ChatAction icon={<SyncOutlined/>} text="重试" onClick={retryHandle}/>
                            <ChatAction icon={<CopyOutlined/>} text="复制" onClick={copyHandle}/>
                            {/*<ChatAction icon={<DeleteOutlined/>} text="删除" onClick={deleteHandle}/>*/}
                        </Space>
                    </div>
                </div>
                <div className={styles["chat-message-item"]}>
                    <Markdown
                        content={message.content}
                        fontSize={14}
                        parentRef={parentRef}
                        defaultShow={false}
                        loading={
                            (message.content.length === 0) &&
                            !isUser
                        }
                    />
                </div>
                <div className={styles['date']}>{date}
                    <>
                        {/* 只有是系统角色 && 正在处理时 && 当前会话状态为true 才显示停止按钮 */}
                        {isSystem  && isProcessing && message?.isStop ? (
                            <Space>
                                <ChatAction icon={<PauseCircleTwoTone/>}
                                            text="停止" onClick={stopHandler}/>
                            </Space>
                        ) : null}
                    </>

                </div>

            </div>
        </div>
    </>
    // <Space className={`${styles.messageWrapper} ${isReceive ? styles.receive : styles.send}`}>
    //     {isReceive ? (
    //         <>
    //             <Avatar shape="square" src={message.avatar} size={40} style={{
    //                 borderRadius: '4px',
    //                 backgroundColor: '#f6f6f6'
    //             }}/>
    //             <p className={styles.message}>{message.message}</p>
    //         </>
    //     ) : (
    //         <>
    //             <p className={styles.message}>{message.message}</p>
    //             <Avatar shape="square" src={message.avatar} size={40} style={{
    //                 borderRadius: '4px',
    //                 backgroundColor: '#f6f6f6'
    //             }}/>
    //         </>
    //     )}
    // </Space>

}